// pages/map/map.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    location: null,
    mapScale: 16,
    satelliteMap: false,
    aimFlag: false,
    mapCtx: null,
    markers: [],
    pageIndex: 1,
    count: 0,
    suggestion: null,
    sugFlag: false,
    scrollT: 0,
    iptValue: '',
    focus: false,
    keyword: ''
  },

  /**
   * 初始化经纬度
   */
  initLocation(){
    var that = this;
    // 赋值已有数据
    that.setData({
      location: app.globalData.location
    });
    // 监听全局变量变化
    app.watch('location',function(value){
      that.setData({
        location: value
      });
    });
    // 初始化setter
    app.globalData.location = that.data.location;
  },

  /**
   * 切换卫星地图
   */
  switchMap(){
    this.setData({
      satelliteMap: !this.data.satelliteMap
    })
  },

  /**
   * 点击目标按钮
   */
  clickAim(){
    if(this.data.aimFlag||this.data.markers.length==0){
      // 显示当前位置
      this.showCurPos();
      this.setData({
        aimFlag: false
      });
    }else{
      // 停止记录坐标
      clearTimeout(this.data.mapT);
      // 同时显示当前及目标位置
      this.showPoint();
      this.setData({
        aimFlag: true
      });
    }
  },

  /**
   * 显示当前位置
   */
  showCurPos(){
    if(!this.mapCtx) return;
    // 地图移动回当前位置
    this.mapCtx.moveToLocation({
      success:res=>{
        // 防止重复触发
        clearTimeout(this.data.mapT);
        // 获取当前位置的经纬度
        this.setData({
          mapT: setTimeout(()=>{this.getMapLoaction()},500)
        });
      }
    });
  },

  /**
   * 同时显示当前及目标位置
   */
  showPoint(){
    if(!this.mapCtx) return;
    this.mapCtx.includePoints({
      padding: [50],
      points: [{
        latitude: this.data.location.lat,
        longitude: this.data.location.lng,
      }, {
        latitude: this.data.markers[0].latitude,
        longitude: this.data.markers[0].longitude,
      }]
    })
  },

  /**
   * 获取保存map显示区域中心的坐标
   */
  getMapLoaction(){
    this.mapCtx.getCenterLocation({
      success: res=>{
        let location = {
          lat: res.latitude,
          lng: res.longitude
        };
        this.setData({
          location: location
        })
        console.log(location,'MAP');
      }
    })
  },

  /**
   * 获取关键词输入提示
   */
  getSuggestion(keyword,page_index=1){
    let location = app.globalData.location;
    if(!location) return;
    if(!keyword) return;
    let key = 'FM6BZ-R3VKW-54HRX-O7HMH-FWMVJ-V2BOT';// 使用在腾讯位置服务申请的key
    wx.request({
      url: 'https://apis.map.qq.com/ws/place/v1/suggestion',
      data:{
        keyword,
        location: location.lat+','+location.lng,
        key,
        page_index,
        page_size: 5
      },
      success: res=>{
        let count = res.data.count;
        this.setData({
          count
        });
        // 关键词提示数据
        let sug = [];
        // 计算距离-批量目标to参数
        let to = [];
        for(let t of res.data.data){
          // 数据整理
          sug.push({
            title: t.title,
            address: t.address,
            location: t.location
          });
          // 计算距离-批量目标to参数
          to.push(t.location.lat+','+t.location.lng)
        }
        // 批量距离计算
        this.getDistance(to.join(';'),res=>{
          // 记录距离
          for(let i in res){
            let dis = parseInt(res[i].distance);
            sug[i].distance = dis<1000?(dis+'m'):((dis/1000).toFixed(1)+'km');
          }
          // 如果是第一页，则重新赋值
          if(page_index==1){
            this.setData({
              suggestion: sug
            });
          }else{
            // 非第一页则添加在数据末尾
            this.setData({
              suggestion: this.data.suggestion.concat(sug)
            });
          }
          console.log(this.data.suggestion,'count'+this.data.count,'index'+page_index);
        })
      }
    })
  },

  /**
   * 批量距离计算
   */
  getDistance(to,callback){
    if(!to){
      if(callback) callback();
      return;
    }
    let location = this.data.location;
    if(!location) return;
    let key = 'FM6BZ-R3VKW-54HRX-O7HMH-FWMVJ-V2BOT';// 使用在腾讯位置服务申请的key
    wx.request({
      url: 'https://apis.map.qq.com/ws/distance/v1/matrix',
      data:{
        key,
        mode: 'driving',
        from: location.lat+','+location.lng,
        to
      },
      success: res=>{
        // console.log(res) 同次请求按地址数计算并发量 并发量不能超过5
        if(callback) callback(res.data.result && res.data.result.rows[0].elements);
      }
    })
  },

  /**
   * 加载更多关键词提示
   */
  moreSuggestion(){
    let keyword = this.data.keyword;
    if(!keyword) return;
    let pageIndex = this.data.pageIndex;
    if(pageIndex*10<this.data.count){
      this.getSuggestion(keyword,pageIndex+1);
      this.setData({
        pageIndex: pageIndex+1
      })
    }
  },

  /**
   * 点击提示框mask
   */
  clickMask(e){
    if(e.target.dataset.type=='mask'){
      // 隐藏提示框
      this.setData({
        sugFlag: false
      });
    }
  },

  /**
   * 点击输入框右侧箭头
   */
  delectValue(){
    // 停止获取关键词提示
    clearTimeout(this.data.iptT);
    this.setData({
      count: 0,
      suggestion: null,
      pageIndex: 1,
      scrollT: 0,
      sugFlag: true,
      focus: true,
      iptValue: '',
      keyword: ''
    });
  },

  /**
   * 输入框获取焦点
   */
  iptFocus(){
    // 显示提示框
    this.setData({
      sugFlag: true
    });
  },

  /**
   * 输入框输入内容
   */
  iptInput(e){
    // 0.5秒内只能触发一次
    clearTimeout(this.data.iptT);
    this.setData({
      iptT: setTimeout(()=>{
        let value = e.detail.value;
        this.setData({
          count: null,
          suggestion: null,
          pageIndex: 1,
          scrollT: 0,
          sugFlag: true
        })
        if(!value){
          this.setData({
            count: 0
          });
          return;
        }
        this.setData({
          keyword: value
        });
        this.getSuggestion(value);
      },500)
    });
  },

  /**
   * 选择地点
   */
  selectSite(e){
    let index = e.currentTarget.dataset.index;
    let item = this.data.suggestion[index];
    let title = item.title;
    let lat = item.location.lat;
    let lng = item.location.lng;
    this.setData({
      sugFlag: false,
      markers: [{
        id: 1,
        latitude: lat,
        longitude: lng,
        title: title,
        iconPath: '../../assets/img/icon/mapPos.png',
        width: 25,
        height: 25
      }]
    });
    this.showPoint();
  },

  /**
   * 点击周边导航
   */
  clickNav(e){
    let type = e.currentTarget.dataset.type;
    this.setData({
      keyword: type,
      iptValue: type,
      count: null,
      suggestion: null,
      pageIndex: 1,
      scrollT: 0,
      sugFlag: true
    });
    this.getSuggestion(type);
  },

  /**
   * 开始导航
   */
  startNav(e){
    let marker = this.data.markers[0];
    // 跳转导航插件
    this.openMap(marker.title,marker.latitude,marker.longitude);
  },
  
  /**
   * 跳转地图插件
   */
  openMap(name,lat,lng){
    // let plugin = requirePlugin('routePlan');
    let key = 'FM6BZ-R3VKW-54HRX-O7HMH-FWMVJ-V2BOT';// 使用在腾讯位置服务申请的key
    let referer = 'echo出行';// 调用插件的app的名称
    // 起点（已授权定位时为空）
    let startPoint = !this.data.location?'':app.globalData.locationType!='IP'?'':JSON.stringify({
      'name': 'IP定位（请授权GPS定位）',
      'latitude': app.globalData.location.lat,
      'longitude': app.globalData.location.lng
    });
    // 终点
    let endPoint = JSON.stringify({
      'name': name,
      'latitude': lat,
      'longitude': lng
    });
    // 跳转地图插件
    wx.navigateTo({
      url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&startPoint=' + startPoint + '&endPoint=' + endPoint + '&navigation=1&themeColor=#555566'
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 初始化经纬度-全局双向绑定
    this.initLocation();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.mapCtx = wx.createMapContext('map');
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 重新获取定位
    app.getLocation(()=>{
      if(this.data.markers.length==0){
        // 显示当前位置
        this.showCurPos();
        this.setData({
          aimFlag: false
        });
      }else{
        // 停止记录坐标
        clearTimeout(this.data.mapT);
        // 同时显示当前及目标位置
        this.showPoint();
        this.setData({
          aimFlag: true
        });
      }
    });
    

    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1
      })
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})